<template>
  <div class="app-container home">
    <div>
      <div class="dhas">
        <div class="sx">
          <p style="text-align: center; font-size: 18px; font-weight: 700">
            当天及第二天10点前
          </p>

         <div v-if="data.remindVos">
          <el-alert 
            style="margin-top: 5px"
            v-for="(item, index) in data.remindVos"
            :key="index"
            :closable="false"
            :title="panduan(item.submissionTask, item.studentDeadlineTask)"
            :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
            :description="`
            单号：${item.orderNumber} \xa0\xa0\xa0\xa0
            客户昵称：${item.customerNickname}\xa0\xa0\xa0\xa0
            老师:${item.teacherName}\xa0\xa0\xa0\xa0
            交稿时间：
            ${item.submissionTask}
            `"
            :show-icon="false"
          >
          </el-alert>
         </div>
        </div>
        <div class="sx">
          <p style="text-align: center; font-size: 18px; font-weight: 700">
            明天及后天10点前
          </p>
<div v-if="data.orderRemindVos">
  <el-alert
            style="margin-top: 5px"
            v-for="(item, index) in data.orderRemindVos"
            :key="index"
            :closable="false"
            title="明天及后天"
            :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
            :description="`
            单号：${item.orderNumber} \xa0\xa0\xa0\xa0
            客户昵称：${item.customerNickname}\xa0\xa0\xa0\xa0
            老师:${item.teacherName}\xa0\xa0\xa0\xa0
            交稿时间：
            ${item.submissionTask}
            `"
            :show-icon="false"
          >
          </el-alert>
</div>
          
        </div>
      </div>

      <div class="dhas" style="margin-top: 20px">
        <div class="sx">
          <p style="text-align: center; font-size: 18px; font-weight: 700">
            学生已退，老师未记录
          </p>
<div v-if="data.orderFormList">
  <el-alert
            style="margin-top: 5px"
            v-for="(item, index) in data.orderFormList"
            :key="index"
            :closable="false"
            title="学生已退，老师未记录"
            :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
            :description="`
            单号：${item.orderNumber} \xa0\xa0\xa0\xa0
            老师：${item.teacherName}\xa0\xa0\xa0\xa0
           
         
            `"
            :show-icon="false"
          >
          </el-alert>
</div>
        
        </div>
        <div class="sx">
          <p style="text-align: center; font-size: 18px; font-weight: 700">
            半小时未报价
          </p>
<div v-if="data.NoQuotation">
  <el-alert
            style="margin-top: 5px"
            v-for="(item, index) in data.NoQuotation"
            :key="index"
            :closable="false"
          
            :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
            :description="`
            询单号：${item} \xa0\xa0\xa0\xa0
           
            `"
            :show-icon="false"
          >
          </el-alert>
</div>
         
        </div>

        <div class="sx">
          <p style="text-align: center; font-size: 18px; font-weight: 700">
            任务都交稿，但是仍有未收金额
          </p>
<div    v-for="(item, index) in data.remindMoneyVos"
            :key="index">
  <el-alert
  v-if="data.remindMoneyVos&&item"
            style="margin-top: 5px"
          
            :closable="false"
            :type="ad(panduan(item.submissionTask, item.studentDeadlineTask))"
            :description="`
            单号：${item.orderNumber} \xa0\xa0\xa0\xa0
            金额：${item.outstandingAmount}\xa0\xa0\xa0\xa0
            `"
            :show-icon="false"
          >
          </el-alert>
</div>
        
        </div>
      </div>
    </div>
    <el-divider />
    <div style="display: flex; justify-content: space-between">
      <div style="width: 29%">
        <span> 客诉/退款 </span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 100 }"
          placeholder="请输入内容"
          v-model="ti.complaint"
        >
        </el-input>
      </div>
      <div style="width: 29%">
        <span> 交接内容</span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 100 }"
          placeholder="请输入内容"
          v-model="ti.handoverContent"
        >
        </el-input>
      </div>
      <div style="width: 29%">
        <span> 待解决</span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 100 }"
          placeholder="请输入内容"
          v-model="ti.beSolved"
        >
        </el-input>
      </div>
    </div>
    <div style="width: 100%; display: flex; flex-direction: row-reverse">
      <div></div>
      <el-button
        style="width: 200px"
        type="primary"
        plain
        size="mini"
        @click="daic"
        v-hasPermi="['system:role:add']"
        >保存交接</el-button
      >
    </div>
  </div>
</template>

<script>
import { tixing } from "../api/new";
import {

  geijiaojie,
  addgeijiaojie,
  addijiaojie
} from "@/api/new";
export default {
  name: "Index",
  data() {
    return {
      ti: {
        "remark": "",
            "recordId": null,
            "complaint": "",
            "handoverContent": "",
            "beSolved": ""
      },
      rtotll:0
    };
  },
  created() {
   
  },
  computed: {
    data() {
      return this.$store.state.user.tixin;
    },
  },
  created() {
    this.getjiaojie();
  },
  methods: {
    getjiaojie() {
      geijiaojie({ pageNo: 1, pageSize: 10 }).then((result) => {
        console.log(result.rows.length);
     this.rtotll=result.rows.total
     console.log(this.rtotll);
        if(result.rows.length) {

          this.ti.recordId=result.rows[0].recordId
          this.ti.complaint=result.rows[0].complaint
          this.ti.handoverContent=result.rows[0].handoverContent
          this.ti.beSolved=result.rows[0].beSolved


        }
      });
    },
    daic() {
      if(this.rtotll==0){
        addijiaojie({   complaint: this.ti.complaint,
        handoverContent: this.ti.handoverContent,
        beSolved: this.ti.beSolved}).then((result) => {
        this.getjiaojie();
        this.$modal.msgSuccess("保存成功");
      });
      }else{
        addgeijiaojie({
        recordId: this.ti.recordId,
        complaint: this.ti.complaint,
        handoverContent: this.ti.handoverContent,
        beSolved: this.ti.beSolved,
      }).then((result) => {
        this.getjiaojie();
        this.$modal.msgSuccess("保存成功");
      });
      }
   
    },

    ad(e) {
      if (e == "超过学生时间") return "error";
      if (e == "不足4小时") return "warning";
      if (e == "超时") return "warning";

      return "success";
    },
    panduan(inputTime, xuetime) {
      // 将传入的时间字符串转换为Date对象
      // 假设inputTime是ISO 8601格式的字符串，例如："2023-04-01T12:00:00Z"
      const inputDate = new Date(inputTime);
      const xue = new Date(xuetime);
      const now = new Date();
      const isAfterNosw = xue < now;

      // 获取当前时间的Date对象
      if (isAfterNosw) return "超过学生时间";

      // 比较是否超过当前时间
      const isAfterNow = inputDate < now;

      if (isAfterNow) return "超时";
      // 计算时间差（毫秒）
      const diff = inputDate - now;

      // 转换为小时（注意：这里假设一天有24小时）
      const diffInHours = diff / (1000 * 60 * 60);

      // 判断是否小于4小时
      const isLessThan4Hours = diffInHours < 4;
      if (isLessThan4Hours) return "不足4小时";

      return "当天及第二天10点前";
    },
    getti() {
      tixing().then((res) => {
     
        this.data = res.data;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.dhas {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .sx {
    width: 49%;
    height: 300px;
    overflow-y: scroll;
    background: rgb(245, 244, 244);
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
